<template>
  <div class="center-wrap">
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" indicator-color="#e5e5e5">
      <van-swipe-item>
        <van-image fit="fill" height="320px" :src="goodsInfoData.goods_img" />
      </van-swipe-item>
      <van-swipe-item>
        <van-image fit="fill" height="320px" src="https://img.yzcdn.cn/vant/cat.jpeg" />
      </van-swipe-item>
      <van-swipe-item>
        <van-image fit="fill" height="320px" :src="goodsInfoData.goods_img" />
      </van-swipe-item>
    </van-swipe>
    <!-- /轮播图 -->

    <!-- 商品价格信息 -->
    <div class="goods-p">
      <div class="price">
        <span class="price-num">￥{{goodsInfoData.current_price}}</span>
        &nbsp;
        <span class="price-unit">/份</span>
      </div>
      <div class="goods-name">{{goodsInfoData.goods_name}}</div>
      <div class="production-place">产地：{{goodsInfoData.origin_place}}</div>
      <div class="get-time">提货时间: {{goodsInfoData.get_time}}</div>
    </div>
    <!-- /商品价格信息 -->
    <!-- 商品数量 -->
    <div class="goods-num">
      <span class="num-label">数量</span>
      <van-stepper v-model="goodsNum" integer @change="onchange" />
      <div class="shop">
        <van-image
          class="shop-img"
          round
          width="30px"
          height="30px"
          src="https://img.yzcdn.cn/vant/cat.jpeg"
        />
        <span class="shop-name">小狐优鲜店</span>
      </div>
    </div>
  </div>

  <!-- 商品导航 -->
  <!-- <van-goods-action class="footer-nav">
      <van-goods-action-icon icon="chat-o" text="分享" dot />
      <van-goods-action-icon icon="cart-o" text="购物车" badge="5" />
      <van-goods-action-icon icon="shop-o" text="店铺" badge="12" />
      <van-goods-action-button type="warning" text="加入购物车" />
      <van-goods-action-button type="danger" text="立即购买" />
  </van-goods-action>-->
  <!-- /商品导航 -->
</template>

<script>
import { getItem } from '@/utils/storage'

export default {
  name: 'BaseInformation',
  components: {

  },
  props: {

  },
  data () {
    return {
      activeName: 'a',
      goodsNum: 1, // 商品数量
      goodsInfoData: getItem('goodsInfoData'),
      info: {}
    }
  },
  watch: {

  },
  computed: {
  },
  created () {
    this.load()
  },
  mounted () {

  },
  methods: {
    load () {
      this.info = {
        num: this.goodsNum,
        goods_img: this.goodsInfoData.goods_img,
        current_price: this.goodsInfoData.current_price,
        goods_name: this.goodsInfoData.goods_name,
        goodsId: this.goodsInfoData.goodsId
      }
      this.$store.commit('setGoodsLists', this.info)
    },
    onchange () {
      this.info.num = this.goodsNum
      this.$emit('goodsNum', this.info)
    }
  }
}
</script>

<style scoped lang="less">
.base-information {
  overflow: scroll;
  position: relative;
}
/deep/.van-tabs__nav {
  .van-tab--active {
    color: red;
  }
}

.van-panel {
  padding: 0px 15px;
  .goods-information {
    background-color: #f7fbfe;
    padding: 20px;
    height: 360px;
  }
  div {
    height: 100px;
  }
  span {
    margin-right: 180px;
  }
  .img-text {
    margin-top: 20px;
  }
}

.goods-p {
  margin: 23px;
  height: 300px;
  .price {
    .price-num {
      color: red;
      font-weight: 600;
      font-size: 55px;
    }
    .price-unit {
      font-size: 35px;
      color: #f4525e;
    }
  }
  .get-time {
    margin-top: 15px;
    color: #e5ae5a;
  }
  .goods-name {
    margin: 15px 0;
    font-size: 30px;
    font-weight: 600;
  }
  .production-place {
    font-size: 4px;
    color: #909090;
    padding-bottom: 30px;
    border-bottom: 10px solid#f4f4f4;
  }
}
.goods-num {
  height: 200px;
  margin-bottom: 23px;
  .van-stepper {
    padding: 20px 0;
    border-bottom: 1px solid #f4f4f4;
  }
  .num-label {
    font-size: 30px;
  }
}

.shop {
  display: flex;
  justify-content: left;
  padding-bottom: 120px;
  .shop-name {
    margin-left: 30px;
    font-size: 20px;
    line-height: 50px;
  }
}
</style>
